<template>
  <div>
    <div v-if="device==='desktop'" class="dswd-joinus-first">
      <div class="first-wrap">
        <div class="joinus-first-text">
          <div class="joinus-en-title">Join Us</div>
          <div class="joinus-title">加入我们</div>
          <div class="joinus-sub-title">新的里程，新的方式，新的维度<br>未来一起创造。</div>
        </div>
        <div class="oper-button">
          <span class="social-button custom-button" @click="setRecruitmentType('1')">社会招聘</span>
          <span class="school-button custom-button" @click="setRecruitmentType('2')">校园招聘</span>
        </div>
        <div class="aboutus-first-img">
          <img src="../../assets/image/joinus/first/joinus.png" alt="aboutus">
          <div class="img-bg" />
        </div>
      </div>
      <div class="dividing-line" />
    </div>
    <div v-if="device==='ipad'" class="dswd-p-joinus-first">
      <div class="first-wrap">
        <div class="joinus-first-text">
          <div class="joinus-en-title">Join Us</div>
          <div class="joinus-title">加入我们</div>
          <div class="joinus-sub-title">新的里程，新的方式，新的维度<br>未来一起创造。</div>
          <div class="oper-button">
            <span class="social-button custom-button" @click="setRecruitmentType('1')">社会招聘</span>
            <span class="school-button custom-button" @click="setRecruitmentType('2')">校园招聘</span>
          </div>
        </div>
        <div class="aboutus-first-img">
          <img src="../../assets/image/joinus/first/joinus.png" alt="aboutus">
          <div class="img-bg" />
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device==='mobile'" class="dswd-m-joinus-first">
      <div class="first-wrap">
        <div class="joinus-first-text">
          <div class="joinus-en-title">Join Us</div>
          <div class="joinus-title">加入我们</div>
          <div class="joinus-sub-title">新的里程，新的方式，新的维度未来一起创造。</div>
          <div class="oper-button">
            <span class="social-button custom-button" @click="setRecruitmentType('1')">社会招聘</span>
            <span class="school-button custom-button" @click="setRecruitmentType('2')">校园招聘</span>
          </div>
        </div>
        <div class="aboutus-first-img">
          <img src="../../assets/image/joinus/first/joinus.png" alt="aboutus">
          <div class="img-bg" />
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {
      filters: {
        item: '1',
        union: ''
      },
      size: ''
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  methods: {
    setRecruitmentType(type) {
      this.$emit('setRecruitmentType', type)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/joinus/first.scss";
</style>